<template>
  <div>
    <van-dropdown-item title="租金" ref="item">
      <template #default>
        <van-picker
          :columns="columns"
          :show-toolbar="true"
          @confirm="onConfirm"
          @cancel="onCancel"
          class="picker-item"
        />
      </template>
    </van-dropdown-item>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import { queryHouseApi } from '@/api'
export default {
  name: 'Price',
  components: {},
  props: {},
  data() {
    return {
      newPriceCondition: ''
    }
  },
  computed: {
    ...mapState(['queryParams']),
    columns() {
      const newprice = []
      this.$store.state.houseCondition.price.forEach((item) => {
        newprice.push(item.label)
      })
      return newprice
    }
  },
  watch: {},
  created() {},
  methods: {
    ...mapMutations(['getQueryParams']),
    onConfirm(val) {
      // 1、拿到点击那项的value值以便发请求
      this.$store.state.houseCondition.price.forEach((item) => {
        if (item.label === val) {
          this.newPriceCondition = item.value
        }
      })
      // 2.发请求
      this.newPriceNetworkRequest()
      // 关闭弹层
      this.$refs.item.toggle(false)
    },
    onCancel() {
      // 关闭弹层
      this.$refs.item.toggle(false)
    },
    async newPriceNetworkRequest() {
      try {
        const obj = this.queryParams
        obj.price = this.newPriceCondition
        // 1、更新本地和vuex中复合请求条件
        this.getQueryParams(obj)
        // console.log('更新后的veux和本地查询条件', obj)
        //2、发请求
        this.$toast.loading({
          message: '加载中...',
          forbidClick: true
        })
        const { data } = await queryHouseApi(obj)
        // 3、触发父组件事件将改变查询条件后重新申请得到的数据传出去，以便更新页面
        this.$emit('updateConditionFondHouse', data.body.list)
      } catch (err) {
        this.$toast.fail('加载失败，请重试')
      }
    }
  }
}
</script>

<style scoped lang="less"></style>
